<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="vdata.isAdd ? '新增内容' : '修改内容'"
    placement="right"
    :closable="true"
    width="600"
    :mask-closable="false"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules" style="padding-bottom:50px">
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="类别名称：" name="typeName">
            <a-input v-model:value="vdata.saveObject['typeName']" placeholder="请输入类别名称" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="所属系统：" name="sysType">
            <a-input v-model:value="vdata.saveObject['sysType']" placeholder="请输入所属系统" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="排序：" name="typeSort">
            <a-input-number v-model:value="vdata.saveObject['typeSort']" :precision="0" placeholder="请输入排序" style="width:100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="() => vdata.visible = false">
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
import { $addQaType, $editQaType } from '@/api/sysManage/qaManage/index'

const props = defineProps({
  callbackFunc: { type: Function, default: () => ({}) }
})

const infoFormModel = ref()
const vdata = reactive({
  btnLoading: false, // 按钮上的loading
  isAdd: true, // 新增 or 修改页面标识
  visible: false, // 是否显示弹层/抽屉
  saveObject: {} as any, // 数据对象

  rules:{ // 表单校验规则
    typeName: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
    sysType: [{ required: true, message: '请输入所属系统', trigger: 'blur' }],
    typeSort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
  },
})

// 修改
async function handleOkFunc(){
  // 表单校验
  await infoFormModel.value.validate()
  if(vdata.isAdd){  // 新增
    await $addQaType(vdata.saveObject)
  }else{  // 修改
    await $editQaType(vdata.saveObject)
  }
  $infoBox.message.success('保存成功')
  props.callbackFunc()
  vdata.visible = false
}


function show(record) { // 弹层打开事件
  vdata.isAdd = !record
  // 数据重置
  clearValidate()
  vdata.saveObject = {}
  vdata.btnLoading = false
  if(record){
    vdata.saveObject = {
      ...record
    }
  }
  vdata.visible = true
}

// 清除表单校验
function clearValidate() {
  if(infoFormModel.value !== undefined){
    infoFormModel.value.clearValidate()
  }
}
defineExpose({ show })
</script>